<template>

	<div style="width: 98%">
		<div style="height: 500px;">
			<div style="text-align: left;margin-bottom: 40px;">
				<span
					style="font-size: 17px;border-left: 5px #00aaff solid;padding-left: 7px;color: #00aaff;">修改用户密码</span>
			</div>
			<div style="width: 40%;height: 200px;text-align: left;">
				<el-form :model="passwordCollection" :rules="rules" ref="passwordCollection" class="demo-ruleForm">
					<div>
						<el-row>
							<el-col :span="6" style="height: 40px;text-align: right;padding-right: 10px;"><span
									style="line-height: 40px;">当前密码</span></el-col>
							<el-col :span="18">
								<el-form-item prop="oldPassword">
									<el-input type="password" v-model="passwordCollection.oldPassword"
										autocomplete="off" placeholder="当前登录密码" show-password></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="6" style="height: 40px;text-align: right;padding-right: 10px;"><span
									style="line-height: 40px;">新密码</span></el-col>
							<el-col :span="18">
								<el-form-item prop="password">
									<el-input type="password" v-model="passwordCollection.password" autocomplete="off"
										placeholder="密码为8-16位，并且包含字母数字特殊字符" show-password></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="6" style="height: 40px;text-align: right;padding-right: 10px;"><span
									style="line-height: 40px;">确认新密码</span></el-col>
							<el-col :span="18">
								<el-form-item prop="redPassword">
									<el-input type="password" v-model="passwordCollection.redPassword"
										autocomplete="off" placeholder="再次输入新密码" show-password></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24" style="text-align: right;">
								<el-button type="primary" style="width: 30%;" @click="aviationLogon('passwordCollection')">完成</el-button>
							</el-col>
						</el-row>
					</div>
				</el-form>
			</div>
		</div>
	</div>

</template>

<script>
	
	import axios from 'axios';
	
	export default {
		data() {
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.passwordCollection.redPassword) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入新密码'));
				} else if (!this.passwordCollection.password.match(this.patt)) {
					callback(new Error('密码为8-16位，并且包含字母数字特殊字符!'));
				} else {
					callback();
				}
			};
			var oldPassword = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入当前登录密码'));
				} else if (!this.passwordCollection.oldPassword.match(this.patt)) {
					callback(new Error('密码为8-16位，并且包含字母数字特殊字符!'));
				} else {
					callback();
				}
			};
			return {
				passwordCollection: {
					oldPassword: '',
					password: '',
					redPassword: ''
				},
				rules: {
					redPassword: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					password: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					oldPassword: [{
						validator: oldPassword,
						trigger: 'blur'
					}]
				},
				patt: /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[@#$%^&+=._])(?=\S+$).{8,16}$/
			}
		},
		methods: {
			aviationLogon(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var formData = new FormData();
						formData.append('oldPassword', this.passwordCollection.oldPassword);
						formData.append('password', this.passwordCollection.password);
						formData.append('redPassword', this.passwordCollection.redPassword);
						axios.post("api/userAction/secondChangePassword", formData)
							.then((res) => {
								if (res.data.code === 200) {
									this.$alert("修改密码成功,请重新登录", '提示', {
										confirmButtonText: '确定',
										type: 'success',
										callback: action => {
											sessionStorage.removeItem("eleToken");
											sessionStorage.removeItem("mailbox");
											sessionStorage.removeItem("sessionId");
											location.href = "/";
										}
									});
								} else {
									if (res.data.code === 401 || res.data.code === 403) {
										this.$alert(res.data.msg, '提示', {
											confirmButtonText: '确定',
											type: 'error',
											callback: action => {
												sessionStorage.removeItem("eleToken");
												sessionStorage.removeItem("mailbox");
												sessionStorage.removeItem("sessionId");
												location.href = "/";
											}
										});
									} else {
										this.$message({
											dangerouslyUseHTMLString: true,
											message: '<strong>' + res.data.msg + '</strong>',
											type: 'error'
										});
									}
								}
							})
					}
				});
				return false;
			}
		}
	}
</script>

<style>
</style>